<template>
  <v-app-bar app>
    <v-img
      max-height="80"
      contain
      max-width="150"
      :src="
        $store.state.isDark
          ? `${require('@/assets/system-config/vuetify-logo-dark-text.svg')}`
          : `${require('@/assets/system-config/vuetify-logo-nodark-text.svg')}`
      "
    ></v-img>

    <v-toolbar-title
      @click="$router.push('/')"
      class="pl-6 accent--text h6"
      style="cursor: pointer"
      >首页</v-toolbar-title
    >
    <v-spacer></v-spacer>

    <v-tooltip v-if="$route && $route.name === 'Detail'" bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          @click="$router.go(-1)"
          class="ml-2 mr-4 primary"
          text
          v-bind="attrs"
          v-on="on"
        >
          <v-icon small>mdi-arrow-left</v-icon>返回
        </v-btn>
      </template>
      <span>返回</span>
    </v-tooltip>

    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn class="mr-4" @click="setColors()" icon v-bind="attrs" v-on="on">
          <v-icon>{{
            $store.state.isDark ? "mdi-lightbulb-on" : "mdi-lightbulb-off"
          }}</v-icon>
        </v-btn>
      </template>
      <span>{{ $store.state.isDark ? "开灯" : "关灯" }}</span>
    </v-tooltip>

    <v-text-field
      class="pr-4"
      style="width: 0px"
      v-model="searchVal"
      hide-details
      label="Regular"
      solo
      dense
      placeholder="搜索 (按 回车)"
      @keyup.enter="onSearch"
      prepend-inner-icon="mdi-magnify"
    ></v-text-field>

    <v-divider vertical inset></v-divider>

    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          @click="$route.name !== 'Home' ? $router.push('/home') : ''"
          class="ml-2"
          text
          v-bind="attrs"
          v-on="on"
        >
          <v-icon small>mdi-cat</v-icon>主页
        </v-btn>
      </template>
      <span>主页</span>
    </v-tooltip>

    <!-- <div class="text-center">
      <v-menu offset-y open-on-hover>
        <template solo-inverted v-slot:activator="{ on, attrs }">
          <v-btn text v-bind="attrs" v-on="on">
            <v-icon small>mdi-jellyfish</v-icon>实战<v-icon right dark small
              >mdi-chevron-down</v-icon
            >
          </v-btn>
        </template>
        <v-list>
          <v-btn @click="See('https://blog.faig.top/vue-element-admin/')" block text
            >实战项目 <v-icon small>mdi-airplane-takeoff</v-icon></v-btn
          >
        </v-list>
      </v-menu>
    </div> -->

    <div class="text-center">
      <v-menu offset-y open-on-hover>
        <template solo-inverted v-slot:activator="{ on, attrs }">
          <v-btn text v-bind="attrs" v-on="on">
            <v-icon small>mdi-rabbit</v-icon>归档<v-icon right dark small
              >mdi-chevron-down</v-icon
            >
          </v-btn>
        </template>
        <v-list>
          <v-btn @click="See('http://ftp.faig.top/fhsy/project/vuetify-icon/')" block text>
            vuetify-icon<v-icon small>mdi-airplane-takeoff</v-icon>
          </v-btn>
        </v-list>
        <v-list>
          <v-btn @click="See('http://ftp.faig.top/fhsy/project/emoji')" block text
            >emoji 表情<v-icon small>mdi-airplane-takeoff</v-icon></v-btn
          >
        </v-list>
      </v-menu>
    </div>

    <div class="text-center">
      <v-menu offset-y open-on-hover>
        <template solo-inverted v-slot:activator="{ on, attrs }">
          <v-btn text v-bind="attrs" v-on="on">
            <v-icon small>mdi-rodent</v-icon>作品<v-icon right dark small
              >mdi-chevron-down</v-icon
            >
          </v-btn>
        </template>
        <v-list>
          <v-btn @click="See('https://fhs1.gitee.io/x-tool/')" block text
            >X-Tool <v-icon small>mdi-airplane-takeoff</v-icon></v-btn
          >
        </v-list>
        <v-list>
          <v-btn @click="See('https://fhs1.gitee.io/auto-vue-doc/#/')" block text
            >Auto-vue-doc <v-icon small>mdi-airplane-takeoff</v-icon></v-btn
          >
        </v-list>
      </v-menu>
    </div>

    <div class="text-center">
      <v-menu offset-y open-on-hover>
        <template solo-inverted v-slot:activator="{ on, attrs }">
          <v-btn text v-bind="attrs" v-on="on">
            <v-icon small>mdi-apple-finder</v-icon>友人<v-icon right dark small
              >mdi-chevron-down</v-icon
            >
          </v-btn>
        </template>
        <v-list>
          <v-btn @click="See('https://blog.3u3.me/')" block text
            >{{ Math.floor(Math.random() * 2) === 0 ? "幾文山" : "生物烯丙菊"
            }}<v-icon small>mdi-airplane-takeoff</v-icon></v-btn
          >
        </v-list>
      </v-menu>
    </div>

    <v-tooltip v-if="isWrite" bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          @click="$route.name !== 'Edit' ? $router.push('/article/edit') : ''"
          class="ml-2"
          text
          v-bind="attrs"
          v-on="on"
        >
          <v-icon small>mdi-dog-side</v-icon>写文章
        </v-btn>
      </template>
      <span>写文章</span>
    </v-tooltip>
  </v-app-bar>
</template>
<script>
import { testing } from "@/api/common";
export default {
  props: { searchValue: { type: String } },
  data: () => ({
    searchVal: "",
    isWrite: false,
  }),
  watch: {
    searchValue: function (newVal) {
      this.searchVal = newVal;
    },
  },
  created() {
    this.searchVal = this.searchValue;
  },
  mounted() {
    // eslint-disable-next-line no-undef
    testing({ ip: returnCitySN["cip"] }).then((data) => {
      if (data.length > 0) this.isWrite = true;
    });
  },
  methods: {
    onSearch() {
      if (this.$route.name === "Home") {
        this.$emit("search", this.searchVal);
      } else {
        this.$router.push("/home");
        this.$emit("search", this.searchVal);
      }
    },
    setColors() {
      if (this.$store.state.isDark) {
        this.$store.dispatch("setIsDark");
        this.$vuetify.theme.dark = false;
      } else {
        this.$store.dispatch("setIsDark");
        this.$vuetify.theme.dark = true;
      }
    },
    See(href) {
      window.open(href, "_blank");
    },
  },
};
</script>
